import React, { useState } from 'react';
import { Button, Col, message, Row, Spin, Table, Space, Cascader, Empty, PageHeader, Alert } from 'antd';
import PersonalLessonTable from '../components/PersonalLessonTable';
import ClassCascader from '@/components/classCascader'
import { request } from '../.umi/plugin-request/request';

export default function() {
  const [week, setWeek] = useState(6);
  const [lessonData, setLessonData] = useState(null);
  const [loading, setLoading] = useState(true);

  const getData = (data, selectedOptions) => {
    if (data.length === 3)
    {
      const hide = message.loading('请求加载中...', 0);
      request('http://t.onionnet.work/api/get', {
        method: 'get',
        params: {
          class_name: data[data.length - 1]
        }
      })
        .then(function(response) {
          hide();
          if (response){
            setLessonData(response.data);
          }
        })
    }
  }


  return (
    <>
      {lessonData &&
      <PageHeader className="site-page-header" title={lessonData.college_name + lessonData.class_name + " | " +lessonData.school_year +"学年第1学期第" + (week) + "周课表"} />
      }
      {lessonData &&
      <Alert message={'此课表内不包括所有教务系统中没有显示的课程，以及不对实践课、调课等情况进行处理，还需自行判断'}/>
      }
      <Row justify = 'right' style={{margin: "15px"}} key = 'dataSelectRow'>
        <Col span={10} key = '5'>
          <ClassCascader onChange={getData} />
        </Col>
        {lessonData &&
          <Col span={2} offset={22} key='4'>
            <Space>
              <Button type="primary" onClick={() => setWeek(week - 1)} disabled={week === 0}>上一周</Button>
              <Button type="primary" onClick={() => setWeek(week + 1)} disabled={week === 18}>下一周</Button>
            </Space>
          </Col>
        }
      </Row>
      <Row justify='center' key = 'data table row'>
        <Col span = {24} key ='empty lesson table'>
          {lessonData &&
            <PersonalLessonTable week={week} data={lessonData}/>
          }
          {!lessonData &&
            <Empty style={{marginTop: 150}} description={'请先选择班级哦'} />
          }
        </Col>
      </Row>
    </>
  );
}
